<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody  layui-center">
<form class="layui-form layui-form-pane" lay-filter="deviceInfo">
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">设备类型:</label>
        <div class="layui-input-inline">
            <input type="text" id="tree" lay-filter="tree" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">设备名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" class="layui-input" maxlength="20"
                   lay-verify="required" lay-reqtext="请输入设备名称" placeholder="设备名称" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">设备编号:</label>
        <div class="layui-input-inline">
            <input type="text" name="no" id="no" class="layui-input" maxlength="20"
                   lay-verify="required" lay-reqtext="请输入设备编号" placeholder="设备编号" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label myRequired">设备位置:</label>
        <div class="layui-input-inline">
            <input type="text" name="location" id="location" class="layui-input"
                   lay-verify="required" lay-reqtext="请输入设备位置" placeholder="设备位置" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">告警状态:</label>
        <div class="layui-input-inline">
            <input type="radio" name="warnStatus" title="告警中" value="1">
            <input type="radio" name="warnStatus" title="未告警" value="0" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否在线:</label>
        <div class="layui-input-inline">
            <input type="radio" name="online" title="在线" value="true" checked>
            <input type="radio" name="online" title="离线" value="false">
        </div>
    </div>
    <div class="layui-form-item layui-center top">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveInfo" id="saveInfo">保存</button>
            <button class="layui-btn" lay-submit lay-filter="updateInfo" id="updateInfo">保存</button>
            <button type="button" class="layui-btn layui-btn-normal" onclick="colsePanl()">取消</button>
            <input type="hidden" name="id" id="id" class="layui-input"/>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.config({
        base: "/js/modules/"
    }).extend({
        "treeSelect": "treeSelect"
    });
    layui.use(['form', 'laydate', 'jquery', 'common', 'treeSelect'], function () {
        let layDate = layui.laydate,
            form = layui.form,
            common = layui.common,
            layer = layui.layer,
            treeSelect = layui.treeSelect,
            $ = layui.$;
        var selectVal = 0;//
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/device/type/tree',
            // data: '/data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '选择设备类型',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                // console.log(d);
                selectVal = d.current.id;
            },
            // 加载完成后的回调函数
            success: function (d) {
                // console.log(d);
                if (!isNaN('[[${deviceInfo.id}]]') && '[[${deviceInfo.id}]]' != '') {
                    treeSelect.checkNode('tree', '[[${deviceInfo.typeId}]]');
                    selectVal = '[[${deviceInfo.typeId}]]';
                }
            }
        });
        form.on('submit(saveInfo)', function (data) {
            data.field.typeId = selectVal;
            $.ajax({
                url: '/device/info/addDeviceInfo',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function () {
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }

            });
            return false;
        });
        //修改
        form.on('submit(updateInfo)', function (data) {
            data.field.typeId = selectVal;
            console.log(data.field.typeId+"========="+selectVal)
            $.ajax({
                url: '/device/info/update',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function () {
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }
            });
            return false;
        });


        form.val('deviceInfo', {
            "name": '[[${deviceInfo.name}]]',
            "no": '[[${deviceInfo.no}]]',
            "location": '[[${deviceInfo.location}]]',
            "warnStatus": '[[${deviceInfo.warnStatus}]]',
            "online": '[[${deviceInfo.online}]]',
            "id": '[[${deviceInfo.id}]]'
        });

        if (!isNaN([[${deviceInfo.id}]])) {
            // selectVal = [[${deviceInfo.typeId}]];
            $('#saveInfo').hide();
        } else {
            $('#updateInfo').hide();
        }
    })


    //取消按钮
    function colsePanl() {
        parent.layui.layer.closeAll();
    }
</script>
</body>
</html>
